<template>
    <div class="integration">
        <div class="nav">
            <router-link :to="{ name: 'integration', query: { type: 0 } }">
                <span @click="ToCommunity">
                    社区
                </span>
            </router-link>
            <router-link :to="{ name: 'integration', query: { type: 1 } }">
                <span>
                    商铺街
                </span>
            </router-link>
            <router-link :to="{ name: 'integration', query: { type: 2 } }">
                <span @click="ToVideo">
                    视频
                </span>
            </router-link>
        </div>
        <div class="navItem"></div>
        <LoadingSpinner v-if="isLoading"></LoadingSpinner>
        <div class="show" v-else :style="{ paddingTop: currentType === 1 ? '0' : '2.6667vw' }">
            <communityList v-if="currentType == 0" :data="communityData"></communityList>
            <findShop v-if="currentType == 1"></findShop>
            <communityList v-if="currentType == 2" :data="videoData"></communityList>
        </div>
        <LoadingSpinner v-if="isLoadingMore"></LoadingSpinner>
    </div>
</template>

<script>
import communityList from '@/components/communityList.vue'
import findShop from '@/components/findShop.vue'
import { GetData, PostData } from '@/api'
import LoadingSpinner from '@/components/LoadingSpinner.vue'

export default {
    data() {
        return {
            currentType: 0,
            isLoading: true,
            isLoadingMore: false,
            communityData: {
                data: null,
                page: 1,
                isNoMore: false,
                isVideo: false
            },
            shopData: null,
            videoData: {
                data: null,
                page: 1,
                isNoMore: false,
                isVideo: true
            },
        }
    },
    components: {
        communityList,
        findShop,
        LoadingSpinner
    },
    async created() {
        this.communityData.data = await GetData('/discover/find_list?size=10&page=1')
        this.isLoading = false
        // console.log(this.communityData)
    },

    mounted() {
        this.currentType = this.$route.query.type || 0
        const links = document.querySelectorAll('.nav a')
        links.forEach(item => {
            if (item.classList.contains('router-link-exact-active'))
                item.classList.remove('router-link-exact-active')
        })
        links[this.currentType].classList.add('router-link-exact-active')
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll)
    },
    watch: {
        '$route.query.type': {
            handler(newValue) {
                this.currentType = newValue;
            },
            immediate: true
        }
    },
    methods: {
        async handleScroll() {
            if (this.currentType != 0) return

            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            const documentHeight = Math.max(
                document.body.scrollHeight,
                document.documentElement.scrollHeight
            );
            const threshold = 3; // 可根据需要调整阈值
            if (documentHeight - scrollTop - windowHeight <= threshold) {
                // console.log('到达页面底部')
                if (!this.isLoadingMore) {
                    this.isLoadingMore = true
                    this.communityData.page++
                    const newData = await GetData(`/discover/find_list?size=10&page=${this.communityData.page}`)
                    if (newData.length < 10) {
                        window.removeEventListener('scroll', this.handleScroll)
                        this.communityData.isNoMore = true
                        this.communityData.data = this.communityData.data.concat(newData)
                        this.isLoadingMore = false
                        return
                    }
                    // console.log('newData:', newData)
                    this.communityData.data = this.communityData.data.concat(newData)
                    setTimeout(() => {
                        this.isLoadingMore = false
                    }, 200)
                }
            }
        },
        async ToVideo() {
            this.isLoading = true
            if (this.videoData.data == null) {
                const jsonData = {
                    size: 10,
                    page: 1,
                    sort: 'goods_id',
                    order: 'desc'
                }
                this.videoData.data = await PostData('/goods/goodsvideo', jsonData)
            }
            this.isLoading = false

        },
        async ToCommunity() {
            if (this.communityData.data == null)
                this.communityData.data = await GetData('/discover/find_list?size=10&page=1')
        }

    }
}
</script>

<style scoped>
.integration {
    width: 100%;
    position: relative;
}

.navItem {
    width: 100%;
    height: 11.7333vw;
}

.nav {
    width: 100%;
    height: 11.7333vw;
    display: flex;
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 99;

    a {
        flex: 1;
        height: 11.7333vw;
        text-decoration: none;

        span {
            color: #aaa;
            font-size: 4.2667vw;
            height: 11.7333vw;
            line-height: 11.7333vw;
            padding: 13px 0;
            position: relative;
        }

        span::after {
            content: '';
            width: 5.3333vw;
            position: absolute;
            bottom: 0;
            left: calc(50% - 2.6667vw);
            height: 1.0667vw;
            background-color: transparent;
            border-radius: 1.3333vw;
        }
    }

    a.router-link-exact-active {
        span {
            color: black;
        }

        span::after {
            background-color: red;
        }
    }
}

.show {
    /* padding-top: 2.6667vw; */
    z-index: 1;
}
</style>